<template>
	<view :class="className" @click="click" class="plr-10">
		<z-icon v-if="icon"></z-icon>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "z-button",
		props: {
			size: {
				type: String,
				default: 'lg'
			},
			type: {
				type: String,
				default: 'orange'
			},
			shape: {
				type: String, //square
				default: 'square'
			},
			icon: {
				type: String,
				default: null,
			},
			iconSize: {
				type: [Number, String],
				default: 14
			},
			disabled: {
				type: Boolean,
				default: false
			},
			pain: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			className() {
				let className = 'z-btn '
				className += ' btn-size-' + this.size
				className += ' btn-type-' + this.type
				className += ' ' + this.shape
				className += this.disabled ? ' disabled' : ''
				className += this.pain ? ' pain' : ''
				return className
			}
		},
		data() {
			return {

			};
		},
		methods: {
			click(e) {
				if (this.disabled) return
				this.$emit('click', e)
			}
		}
	}
</script>

<style lang="scss">
	.z-btn {
		@extend .flex-center;
		white-space: nowrap;
		box-sizing: border-box;
	}

	$btn-size:(lg:(h:88rpx, text:32rpx, round:66rpx),def:(h:88rpx, text:32rpx, round:16rpx), sm:(h:60rpx, text:24rpx, round:32rpx), mini:(h:42rpx, text:24rpx, round:22rpx)); //按钮大小

	@each $btnk,
	$btnv in $btn-size {
		.btn-size-#{$btnk} {
			height: map-get($btnv, h);
			font-size: map-get($btnv, text);
			border-radius: map-get($btnv, round);;
		}

		.btn-size-#{$btnk}.circle {
			height: map-get($btnv, h);
			border-radius: map-get($btnv, round);
		}

	}

	// $img_jc:(bg:url('/static/img/bg/btn-default-bg.png'), color:#151714, disabledBg:url('/static/img/bg/btn-disable-bg.png'),painBg:url('/static/img/bg/btn-pain-bg.png'),painColor:#28FA08, disableText:#979997);
	// $img_white:(bg:url('/static/img/bg/btn-white-bg.png'), color:#FFFFFF, disabledBg:url('/static/img/bg/btn-white-bg.png'),painBg:url('/static/img/bg/btn-white-bg.png'),painColor:#FFFFFF, disableText:#FFFFFF);
	$btn-img-type:();
	// $btn-img-type:(img_jc:$img_jc,img_white:$img_white);

	@each $btnk,
	$btnv in $btn-img-type {
		.btn-type-#{$btnk} {
			background-image: map-get($btnv, bg);
			color: map-get($btnv, color);
			background-size: 100% 100%;
			border-radius: 0 !important; 
			font-weight: 600;
		}
		
		.btn-type-#{$btnk}.pain {
			background-image: map-get($btnv, painBg);
			color: map-get($btnv, painColor);
			background-size: 100% 100%;
			border-radius: 0 !important; 
			font-weight: 600;
		}

		.btn-type-#{$btnk}.disabled{
			background-image: map-get($btnv, disabledBg);
			color: map-get($btnv, disableText);
			background-size: cover;
			background-size: 100% 100%;
			border-radius: 0 !important; 
		}
	}

	$primary:(bg:#002FA7, color:white, disabledBg:#EAECEF, disableText:#999999);
	$dark:(bg:#222222, color:white, disabledBg:rgba(34, 34, 34, 0.5), disableText:#cccccc);
	$light:(bg:white, color:#666666, disabledBg:#EAECEF, disableText:#999999);
	$green:(bg: #28FA08, color:#151714, disabledBg:#333831, disableText:#979997);
	$orange:(bg: #B67930, color:#fff, disabledBg:#EDEDED, disableText:#666);
	$btn-type:(primary:$primary, light:$light, dark:$dark, green:$green,orange:$orange); //按钮类型

	@each $btnk,
	$btnv in $btn-type {
		.btn-type-#{$btnk} {
			background: map-get($btnv, bg);
			color: map-get($btnv, color);
			background-size: contain;
		}

		.btn-type-#{$btnk}.pain {
			background-color: transparent;
			border: 1px solid map-get($btnv, bg);
			color: map-get($btnv, bg);
		}

		.btn-type-#{$btnk}.disabled.pain {
			background: transparent;
			border: 1px solid map-get($btnv, disableText);
			color: map-get($btnv, disableText);
		}

		.btn-type-#{$btnk}.disabled {
			background-size: cover;
			background: map-get($btnv, disabledBg);
			color: map-get($btnv, disableText);
		}
	}
</style>
